<template>
  <div class="main">
    <a-modal v-model:visible="visible" :width="900">
      <template #title>
        <h3>预警信息查询</h3>
      </template>
        <template #footer>
          <a-button key="back" @click="handleCancelClick" class="btn">取消</a-button>
          <a-button key="submit" type="primary" @click="handleOkClick" class="btn">确定</a-button>
        </template>
        <a-row class="top-title">
          <a-col :span="3">
              <h4>机构名称：</h4>
          </a-col>
          <a-col :span="6">
                <a-tree-select
                v-model:value="workshopName"
                show-search
                style="width: 200px"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                allow-clear
                tree-default-expand-all
                :tree-data="powerTreeOrgData"
                >
                </a-tree-select>
            </a-col>
          <a-col :span="9">
            <a-button key="search" @click="handleSearchClick(workshopName)" class="btn">查询</a-button>
          </a-col>
        </a-row>
          <a-table :columns="columns" :data-source="dataDetail" v-model:visible="visible">
              <template #headerCell="{ column }">
              <template v-if="column.key === 'workshopName'">
                  <span>
                  车间
                  </span>
              </template>
              </template>
              <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'action'">
                  <a-button type="primary" class="btn" @click="handleViewClick(value)">去查看</a-button>
              </template>
              </template>
          </a-table>
      </a-modal>
  </div>
</template>

<script setup>
import { ref,onMounted,watchEffect,watch } from 'vue';
import request from '@/utils/request'
const props = defineProps(['powerTreeData','dataDetail'])
const dataDetail = ref([])
const workshopName = ref('')
const visible = ref(false);
const powerTreeOrgData = ref([])

const columns = [{
  name: '车间',
  dataIndex: 'workshopName',
  key: 'workshopName',
  align:'center'
}, {
  title: '班组',
  dataIndex: 'teamName',
  key: 'teamName',
  align:'center'
}, {
  title: '绝缘工具',
  dataIndex: 'name',
  key: 'name',
  align:'center'
}, {
  title: '编号',
  key: 'id',
  dataIndex: 'id',
  align:'center'
}, {
  title: '距截止时间天数',
  key: 'daysDiff',
  dataIndex: 'daysDiff',
  align:'center'
},{
  title: '有效截止日期',
  key: 'expireDate',
  dataIndex: 'expireDate',
  align:'center'
},
// {
//   title: '操作',
//   key: 'action',
//   align:'center'
// }
];
// 获取机构下拉列表数据和表格数据
watchEffect(() =>{
   powerTreeOrgData.value = props.powerTreeData 
   dataDetail.value = props.dataDetail
   console.log(powerTreeOrgData.value);
})
// 如果清空机构的下拉框，就刷新一下表格
// watch(workshopName,() => {
//   loadData()
// })

//取消按钮
const handleCancelClick = () => {
  visible.value = false;
  workshopName.value=''
  data.value=[]
}

//确定按钮
const handleOkClick = () => {
  visible.value = false;
  workshopName.value=''
  data.value=[]
} 

//查询按钮
const handleSearchClick = async (workshopName) => {
  // console.log(workshopName);
  const result = await request({
    url:'/tools/reminder',
    method:'get',
    params:{
      orgId:workshopName
      // speciality:1
    }
  })
  // console.log(result);
  dataDetail.value = result.data
}
const handleViewClick = () => {
  visible.value = false;
}
const showModal = () => {
  visible.value = true;
};
  
defineExpose({
  showModal,
})
</script>

<style lang="less" scoped>
.top-title{
  margin-top: 10px;
  padding-bottom: 20px;
  align-items: center;
}
 h3{
      display: inline-block;
      font-weight: 900;
  }
  .table{
      padding-top: 40px;
  }   
  .btn{
      background-color: #169bd5;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      height: 38px;
      width: 80px;
  }
</style>